
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">

<head>

<title>tablesorter 2.0 - documentation</title>

<script type="text/javascript" src="js/jquery-1.1.3.js"></script>
<script type="text/javascript" src="js/jquery.tablesorter.pack.js"></script>


<script type="text/javascript" src="js/jquery.metadata.js"></script>

<script type="text/javascript" src="js/code-examples.js"></script>
<script type="text/javascript" src="js/chili/chili-1.8b.js"></script>
<script type="text/javascript" src="js/tabs/jquery.tabs.pack.js"></script>

<script type="text/javascript">
/* Stop IE flicker */
if ($.browser.msie == true) document.execCommand('BackgroundImageCache', false, true);
ChiliBook.recipeFolder     = "js/chili/";
ChiliBook.stylesheetFolder = "js/chili/";
</script>

<link rel="stylesheet" href="assets/css/default.css" type="text/css"
	media="print, projection, screen" />
<link rel="stylesheet" href="../jquery.tablesorter.pager.css" type="text/css"
	media="print, projection, screen" />
<link rel="stylesheet" href="assets/css/jquery.tabs.css" type="text/css"
	media="print, projection, screen" />
<!-- Additional IE/Win specific style sheet (Conditional Comments) -->
<!--[if lte IE 7]>
<link rel="stylesheet" href="assets/css/jquery.tabs-ie.css" type="text/css" media="projection, screen"/>
<![endif]-->

</head>



<body>
<div id="toc">
<h2>Table of contents</h2>
</div>

<div class="info">
To select more then one column to sort by, hold down your shift key and press the "headers".<br/>
Pressing a all ready sorted column while holding down shift will reverse the order.
<br/>

<br/>

Releasing the shift key and pressing a column will result in a one column sort.
</div>

<div id="simple-example" class="section">
<h2>Make the tablesorter sort on a column.</h2>

<p>Text here.</p>

<script type="text/javascript">
$(document).ready(function() {
	$("#simple").tablesorter();
	// sort on the first column and third column, order asc
	var c = [[0,0],[2,0]];
	$("#simple").trigger("sorton",[c]);
	return false;
}); 		
</script>

<div class="tab">
<ul>
	<li>Demo</li>
	<li>Javascript</li>
	<li>HTML</li>
</ul>
<div class="demo">
<table id="simple" cellspacing="0">
	<thead>
		<tr>
			<th>Name</th>
			<th>Major</th>
			<th>Gender</th>
			<th>English</th>
			<th>Japanese</th>
			<th>Calculus</th>
			<th>Geometry</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Student01</td>
			<td>Languages</td>
			<td>male</td>
			<td>80</td>
			<td>70</td>
			<td>75</td>
			<td>80</td>
		</tr>
		<tr>
			<td>Student02</td>
			<td>Mathematics</td>
			<td>male</td>
			<td>90</td>
			<td>88</td>
			<td>100</td>
			<td>90</td>

		</tr>
		<tr>
			<td>Student03</td>
			<td>Languages</td>
			<td>female</td>
			<td>85</td>
			<td>95</td>
			<td>80</td>
			<td>85</td>
		</tr>
	</tbody>
</table>
</div>
<div class="js"></div>
<div class="html"></div>
</div>
</div>

<div id="simple-bind-example" class="section">
<h2>Make the tablesorter sort on a column, from a link outside the
table.</h2>

<p>Text here.</p>

<script type="text/javascript">
$(document).ready(function() {
	$("#simple-bind").tablesorter();
	$("#simple-bind-link").click(function() {
		// sort on the third and fifth column, order asc
		var c = [[2,0],[6,0]];
		$("#simple-bind").trigger("sorton",[c]);
	});
	
}); 		
</script>

<div class="tab">
<ul>
	<li>Demo</li>
	<li>Javascript</li>
	<li>HTML</li>
</ul>
<div class="demo">
<table id="simple-bind" cellspacing="0">
	<thead>
		<tr>
			<th>Name</th>
			<th>Major</th>
			<th>Gender</th>
			<th>English</th>
			<th>Japanese</th>
			<th>Calculus</th>
			<th>Geometry</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Student01</td>
			<td>Languages</td>
			<td>male</td>
			<td>80</td>
			<td>70</td>
			<td>75</td>
			<td>80</td>
		</tr>
		<tr>
			<td>Student02</td>
			<td>Mathematics</td>
			<td>male</td>
			<td>90</td>
			<td>88</td>
			<td>100</td>
			<td>90</td>

		</tr>
		<tr>
			<td>Student03</td>
			<td>Languages</td>
			<td>female</td>
			<td>85</td>
			<td>95</td>
			<td>80</td>
			<td>85</td>
		</tr>
	</tbody>
</table>
<a href="#" id="simple-bind-link">Sort the third and fifth column order
asc</a></div>
<div class="js"></div>
<div class="html"></div>
</div>
</div>

<div id="simple-options-example" class="section">
<h2>Setting common options</h2>

<p>Text here.</p>

<script type="text/javascript">
$(document).ready(function() {
	$("#simple-options").tablesorter({
		cssHeader: 'header',
		cssAsc: 'headerSortUp',
		cssDesc: 'headerSortDown',
		sortInitialOrder: 'desc'
	});
}); 		
</script>

<div class="tab">
<ul>
	<li>Demo</li>
	<li>Javascript</li>
	<li>HTML</li>
</ul>
<div class="demo">
<table id="simple-options" cellspacing="0">
	<thead>
		<tr>
			<th>Name</th>
			<th>Major</th>
			<th>Gender</th>
			<th>English</th>
			<th>Japanese</th>
			<th>Calculus</th>
			<th>Geometry</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Student01</td>
			<td>Languages</td>
			<td>male</td>
			<td>80</td>
			<td>70</td>
			<td>75</td>
			<td>80</td>
		</tr>
		<tr>
			<td>Student02</td>
			<td>Mathematics</td>
			<td>male</td>
			<td>90</td>
			<td>88</td>
			<td>100</td>
			<td>90</td>

		</tr>
		<tr>
			<td>Student03</td>
			<td>Languages</td>
			<td>female</td>
			<td>85</td>
			<td>95</td>
			<td>80</td>
			<td>85</td>
		</tr>
	</tbody>
</table>
</div>
<div class="js"></div>
<div class="html"></div>
</div>
</div>

<div id="ajax-example" class="section">
<h2>Updating table data</h2>

<p>Text here.</p>

<script type="text/javascript">
$(document).ready(function() {
	$("#ajax").tablesorter();
	$("#ajax-append").click(function() {
		 $.get("assets/ajax-content.html", function(html) {
		 	// append the "ajax'd" data to the table body
		 	$("#ajax > tbody").append(html);
			// let the plugin know that we made a update
			$("#ajax").trigger("update");
			// set sorting column and direction, this will sort on the first and third column
			var sorting = [[0,0],[2,0]];
			// sort on the first column
			$("#ajax").trigger("sorton",[sorting]);
		});
		return false;
	});
}); 		
</script>

<div class="tab">
<ul>
	<li>Demo</li>
	<li>Javascript</li>
	<li>HTML</li>
</ul>
<div class="demo">
<table id="ajax" cellspacing="0">
	<thead>
		<tr>
			<th>Name</th>
			<th>Major</th>
			<th>Gender</th>
			<th>English</th>
			<th>Japanese</th>
			<th>Calculus</th>
			<th>Geometry</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Student01</td>
			<td>Languages</td>
			<td>male</td>
			<td>80</td>
			<td>70</td>
			<td>75</td>
			<td>80</td>
		</tr>
		<tr>
			<td>Student02</td>
			<td>Mathematics</td>
			<td>male</td>
			<td>90</td>
			<td>88</td>
			<td>100</td>
			<td>90</td>

		</tr>
		<tr>
			<td>Student03</td>
			<td>Languages</td>
			<td>female</td>
			<td>85</td>
			<td>95</td>
			<td>80</td>
			<td>85</td>
		</tr>
	</tbody>
</table>
<a href="#" id="ajax-append">Append new table data</a></div>
<div class="js"></div>
<div class="html"></div>
</div>
</div>


<div id="rowspan-example" class="section">
<h2>Rowspan and colspan in table headers</h2>

<p>Text here.</p>


<script type="text/javascript">
$(document).ready(function() {
	$("#rowspan").tablesorter();
}); 		
</script>


<div class="tab">
<ul>
	<li>Demo</li>
	<li>Javascript</li>
	<li>HTML</li>
</ul>
<div class="demo">
<table id="rowspan" cellspacing="0">
	<thead>
		<tr>
			<th rowspan="2">Name</th>
			<th colspan="2">General information</th>
			<th colspan="4">Degree information</th>
		</tr>
		<tr>
			<th>Major</th>
			<th>Gender</th>
			<th>English</th>
			<th>Japanese</th>
			<th>Calculus</th>
			<th>Geometry</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Student01</td>
			<td>Languages</td>
			<td>male</td>
			<td>80</td>
			<td>70</td>
			<td>75</td>
			<td>80</td>
		</tr>
		<tr>
			<td>Student02</td>
			<td>Mathematics</td>
			<td>male</td>
			<td>90</td>
			<td>88</td>
			<td>100</td>
			<td>90</td>

		</tr>
		<tr>
			<td>Student03</td>
			<td>Languages</td>
			<td>female</td>
			<td>85</td>
			<td>95</td>
			<td>80</td>
			<td>85</td>
		</tr>
	</tbody>
</table>
</div>
<div class="js"></div>
<div class="html"></div>
</div>
</div>


<div id="options-example" class="section">
<h2>Disabling headers, with plugin options</h2>

<p>Text here.</p>

<script type="text/javascript">
$(document).ready(function() {
	$("#header-options").tablesorter({
		headers: {
			1: {
				sorter: false
			},
			2: {
				sorter: false
			}
		}
	});
}); 		
</script>

<div class="tab">
<ul>
	<li>Demo</li>
	<li>Javascript</li>
	<li>HTML</li>
</ul>
<div class="demo">
<table id="header-options" cellspacing="0">
	<thead>
		<tr>
			<th>Name</th>
			<th>Major</th>
			<th>Gender</th>
			<th>English</th>
			<th>Japanese</th>
			<th>Calculus</th>
			<th>Geometry</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Student01</td>
			<td>Languages</td>
			<td>male</td>
			<td>80</td>
			<td>70</td>
			<td>75</td>
			<td>80</td>
		</tr>
		<tr>
			<td>Student02</td>
			<td>Mathematics</td>
			<td>male</td>
			<td>90</td>
			<td>88</td>
			<td>100</td>
			<td>90</td>

		</tr>
		<tr>
			<td>Student03</td>
			<td>Languages</td>
			<td>female</td>
			<td>85</td>
			<td>95</td>
			<td>80</td>
			<td>85</td>
		</tr>
	</tbody>
</table>
</div>
<div class="js"></div>
<div class="html"></div>
</div>
</div>


<div id="metadata-example" class="section">
<h2>Disabling headers, with inline options</h2>

<p>Text here.</p>

<script type="text/javascript">
$(document).ready(function() {
	$("#metadata").tablesorter({});
}); 		
</script>

<div class="tab">
<ul>
	<li>Demo</li>
	<li>Javascript</li>
	<li>HTML</li>
</ul>
<div class="demo">
<table id="metadata" cellspacing="0">
	<thead>
		<tr>
			<th class="{sorter: false}">Name</th>
			<th>Major</th>
			<th class="{sorter: false}">Gender</th>
			<th>English</th>
			<th>Japanese</th>
			<th>Calculus</th>
			<th>Geometry</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Student01</td>
			<td>Languages</td>
			<td>male</td>
			<td>80</td>
			<td>70</td>
			<td>75</td>
			<td>80</td>
		</tr>
		<tr>
			<td>Student02</td>
			<td>Mathematics</td>
			<td>male</td>
			<td>90</td>
			<td>88</td>
			<td>100</td>
			<td>90</td>

		</tr>
		<tr>
			<td>Student03</td>
			<td>Languages</td>
			<td>female</td>
			<td>85</td>
			<td>95</td>
			<td>80</td>
			<td>85</td>
		</tr>
	</tbody>
</table>
</div>
<div class="js"></div>
<div class="html"></div>
</div>
</div>

<div id="parser-plugin-example" class="section">
<h2>Setting column parsers, using plugin options</h2>

<p>Text here.</p>

<script type="text/javascript">
$(document).ready(function() {
	$("#parser-plugin").tablesorter({
		0: {
			sorter:'integer'
		}
	});
}); 		
</script>

<div class="tab">
<ul>
	<li>Demo</li>
	<li>Javascript</li>
	<li>HTML</li>
</ul>
<div class="demo">
<table id="parser-plugin" cellspacing="0">
	<thead>
		<tr>
			<th>Name</th>
			<th>Major</th>
			<th>Gender</th>
			<th>English</th>
			<th>Japanese</th>
			<th>Calculus</th>
			<th>Geometry</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Student01</td>
			<td>Languages</td>
			<td>male</td>
			<td>80</td>
			<td>70</td>
			<td>75</td>
			<td>80</td>
		</tr>
		<tr>
			<td>Student02</td>
			<td>Mathematics</td>
			<td>male</td>
			<td>90</td>
			<td>88</td>
			<td>100</td>
			<td>90</td>

		</tr>
		<tr>
			<td>Student03</td>
			<td>Languages</td>
			<td>female</td>
			<td>85</td>
			<td>95</td>
			<td>80</td>
			<td>85</td>
		</tr>
	</tbody>
</table>
</div>
<div class="js"></div>
<div class="html"></div>
</div>
</div>


<div id="parser-inline-example" class="section">
<h2>Setting column parsers, using inline options</h2>

<p>Text here.</p>

<script type="text/javascript">
$(document).ready(function() {
	$("#parsers-inline").tablesorter();
}); 		
</script>

<div class="tab">
<ul>
	<li>Demo</li>
	<li>Javascript</li>
	<li>HTML</li>
</ul>
<div class="demo">
<table id="parsers-inline" cellspacing="0">
	<thead>
		<tr>
			<th class="{sorter:'integer'}">Name</th>
			<th>Major</th>
			<th>Gender</th>
			<th>English</th>
			<th>Japanese</th>
			<th>Calculus</th>
			<th>Geometry</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Student01</td>
			<td>Languages</td>
			<td>male</td>
			<td>80</td>
			<td>70</td>
			<td>75</td>
			<td>80</td>
		</tr>
		<tr>
			<td>Student02</td>
			<td>Mathematics</td>
			<td>male</td>
			<td>90</td>
			<td>88</td>
			<td>100</td>
			<td>90</td>

		</tr>
		<tr>
			<td>Student03</td>
			<td>Languages</td>
			<td>female</td>
			<td>85</td>
			<td>95</td>
			<td>80</td>
			<td>85</td>
		</tr>
	</tbody>
</table>
</div>
<div class="js"></div>
<div class="html"></div>
</div>
</div>


<div id="force-example" class="section">
<h2>Forcing a column to sort by</h2>

<p>Text here.</p>

<script type="text/javascript">
$(document).ready(function() {
	$("#force").tablesorter({
		sortForce: [3,1]
	});
}); 		
</script>

<div class="tab">
<ul>
	<li>Demo</li>
	<li>Javascript</li>
	<li>HTML</li>
</ul>
<div class="demo">
<table id="force" cellspacing="0">
	<thead>
		<tr>
			<th>Name</th>
			<th>Major</th>
			<th>Gender</th>
			<th>English</th>
			<th>Japanese</th>
			<th>Calculus</th>
			<th>Geometry</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Student01</td>
			<td>Languages</td>
			<td>male</td>
			<td>80</td>
			<td>70</td>
			<td>75</td>
			<td>80</td>
		</tr>
		<tr>
			<td>Student02</td>
			<td>Mathematics</td>
			<td>male</td>
			<td>90</td>
			<td>88</td>
			<td>100</td>
			<td>90</td>

		</tr>
		<tr>
			<td>Student03</td>
			<td>Languages</td>
			<td>female</td>
			<td>85</td>
			<td>95</td>
			<td>80</td>
			<td>85</td>
		</tr>
	</tbody>
</table>
</div>
<div class="js"></div>
<div class="html"></div>
</div>
</div>

<div id="text-extraction-complex-example" class="section">
<h2>Complex column structures (lot's of markup)</h2>

<p>Text here.</p>

<script type="text/javascript">
$(document).ready(function() {
	$("#text-extraction").tablesorter({
		textExtraction: 'complex'
	});
}); 		
</script>

<div class="tab">
<ul>
	<li>Demo</li>
	<li>Javascript</li>
	<li>HTML</li>
</ul>
<div class="demo">
<table id="text-extraction" cellspacing="0">
	<thead>
		<tr>
			<th>Name</th>
			<th>Major</th>
			<th>Gender</th>
			<th>English</th>
			<th>Japanese</th>
			<th>Calculus</th>
			<th>Geometry</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td><a href="#"><strong>Student01</strong></a></td>
			<td>Languages</td>
			<td>male</td>
			<td>80</td>
			<td>70</td>
			<td>75</td>
			<td><a href="http://google.com"><span><strong>80</strong></span></a></td>
		</tr>
		<tr>
			<td><a href="#"><strong>Student02</strong></a></td>
			<td>Mathematics</td>
			<td>male</td>
			<td>90</td>
			<td>88</td>
			<td>100</td>
			<td><a href="http://flickr.com"><span><strong>90</strong></span></a></td>

		</tr>
		<tr>
			<td><a href="#"><strong>Student03</strong></a></td>
			<td>Languages</td>
			<td>female</td>
			<td>85</td>
			<td>95</td>
			<td>80</td>
			<td><a href="http://digg.com"><span><strong>85</strong></span></a></td>
		</tr>
	</tbody>
</table>
</div>
<div class="js"></div>
<div class="html"></div>
</div>
</div>


<div id="parser-custom-plugin-example" class="section">
<h2>Custom parsers, using plugin options</h2>

<p>Text here.</p>

<script type="text/javascript">
// add parser through the tablesorter addParser method
$.tablesorter.addParser({
	// set a unique id
	id: 'grades',
	is: function(s) {
		// return false so this parser is not auto detected
		return false;
	},
	format: function(s) {
		// format your data for normalization
		return s.toLowerCase().replace(/good/,2).replace(/medium/,1).replace(/bad/,0);
	},
	// set type, either numeric or text
	type: 'numeric'
});

$(document).ready(function() {
	$("#parser-custom-plugin").tablesorter({
		headers: {
			6: {
				sorter:'grades'
			}
		}
	});
}); 		
</script>

<div class="tab">
<ul>
	<li>Demo</li>
	<li>Javascript</li>
	<li>HTML</li>
</ul>
<div class="demo">
<table id="parser-custom-plugin" cellspacing="0">
	<thead>
		<tr>
			<th>Name</th>
			<th>Major</th>
			<th>Gender</th>
			<th>English</th>
			<th>Japanese</th>
			<th>Calculus</th>
			<th>Overall grades</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Student01</td>
			<td>Languages</td>
			<td>male</td>
			<td>80</td>
			<td>70</td>
			<td>75</td>
			<td>bad</td>
		</tr>
		<tr>
			<td>Student02</td>
			<td>Mathematics</td>
			<td>male</td>
			<td>90</td>
			<td>88</td>
			<td>100</td>
			<td>good</td>
		</tr>
		<tr>
			<td>Student03</td>
			<td>Languages</td>
			<td>female</td>
			<td>85</td>
			<td>95</td>
			<td>80</td>
			<td>medium</td>
		</tr>
	</tbody>
</table>
</div>
<div class="js"></div>
<div class="html"></div>
</div>
</div>


<div id="parser-custom-inline-example" class="section">
<h2>Custom parsers, using inline options</h2>

<p>Text here.</p>

<script type="text/javascript">
// add parser through the tablesorter addParser method
$.tablesorter.addParser({
	// set a unique id
	id: 'grades',
	is: function(s) {
		// return false so this parser is not auto detected
		return false;
	},
	format: function(s) {
		// format your data for normalization
		return s.toLowerCase().replace(/good/,2).replace(/medium/,1).replace(/bad/,0);
	},
	// set type, either numeric or text
	type: 'numeric'
});

$(document).ready(function() {
	$("#parser-custom-inline").tablesorter();
}); 		
</script>


<div class="tab">
<ul>
	<li>Demo</li>
	<li>Javascript</li>
	<li>HTML</li>
</ul>
<div class="demo">
<table id="parser-custom-inline" cellspacing="0">
	<thead>
		<tr>
			<th>Name</th>
			<th>Major</th>
			<th>Gender</th>
			<th>English</th>
			<th>Japanese</th>
			<th>Calculus</th>
			<th class="{sorter:'grades'}">Overall grades</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Student01</td>
			<td>Languages</td>
			<td>male</td>
			<td>80</td>
			<td>70</td>
			<td>75</td>
			<td>bad</td>
		</tr>
		<tr>
			<td>Student02</td>
			<td>Mathematics</td>
			<td>male</td>
			<td>90</td>
			<td>88</td>
			<td>100</td>
			<td>good</td>

		</tr>
		<tr>
			<td>Student03</td>
			<td>Languages</td>
			<td>female</td>
			<td>85</td>
			<td>95</td>
			<td>80</td>
			<td>medium</td>
		</tr>
	</tbody>
</table>
</div>
<div class="js"></div>
<div class="html"></div>
</div>
</div>


<div id="widgets-zebra-example" class="section">
<h2>Widgets, zebra tables</h2>

<p>Text here.</p>

<script type="text/javascript">
$(document).ready(function() {
	$("#widgets-zebra").tablesorter({
		widgets: ['zebra']
	});
}); 		
</script>


<div class="tab">
<ul>
	<li>Demo</li>
	<li>Javascript</li>
	<li>HTML</li>
</ul>
<div class="demo">
<table id="widgets-zebra" cellspacing="0">
	<thead>
		<tr>
			<th>Name</th>
			<th>Major</th>
			<th>Gender</th>
			<th>English</th>
			<th>Japanese</th>
			<th>Calculus</th>
			<th>Overall grades</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Student01</td>
			<td>Languages</td>
			<td>male</td>
			<td>80</td>
			<td>70</td>
			<td>75</td>
			<td>bad</td>
		</tr>
		<tr>
			<td>Student02</td>
			<td>Mathematics</td>
			<td>male</td>
			<td>90</td>
			<td>88</td>
			<td>100</td>
			<td>good</td>

		</tr>
		<tr>
			<td>Student03</td>
			<td>Languages</td>
			<td>female</td>
			<td>85</td>
			<td>95</td>
			<td>80</td>
			<td>medium</td>
		</tr>
	</tbody>
</table>
</div>
<div class="js"></div>
<div class="html"></div>
</div>
</div>

<div id="widgets-custom-example" class="section">
<h2>Widgets, making your own widget.</h2>

<p>Text here.</p>

<script type="text/javascript">
$(document).ready(function() {

	$.tablesorter.addWidget({
		id: 'repeatHeaders',
		format: function(table) {
			
			var tableBodyLength = table.tBodies[0].rows.length;
			
			// cache headers
			if(!this.headers) {
				var h = this.headers = []; 
				$("thead th",table).each(function() {
					h.push(
						"<th>" + $(this).text() + "</th>"
					);
					
				});
			}	
			
			for(var i=0; i < tableBodyLength; i++) {
				// insert a copy of the table head every 10th row
				if(i%4 == 3) {
					$("tbody > tr:eq(" + i + ")",table).before(
						$("<tr></tr>").html(this.headers.join(""))
					
					);	
				}
			}
		}
	});
	
	$("#widgets-custom").tablesorter({
		widgets: ['zebra','repeatHeaders']
	});
}); 		
</script>


<div class="tab">
<ul>
	<li>Demo</li>
	<li>Javascript</li>
	<li>HTML</li>
</ul>
<div class="demo">
<table id="widgets-custom" cellspacing="0">
	<thead>
		<tr>
			<th>Name</th>
			<th>Major</th>
			<th>Gender</th>
			<th>English</th>
			<th>Japanese</th>
			<th>Calculus</th>
			<th>Overall grades</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Student01</td>
			<td>Languages</td>
			<td>male</td>
			<td>80</td>
			<td>70</td>
			<td>75</td>
			<td>bad</td>
		</tr>
		<tr>
			<td>Student02</td>
			<td>Mathematics</td>
			<td>male</td>
			<td>90</td>
			<td>88</td>
			<td>100</td>
			<td>good</td>

		</tr>
		<tr>
			<td>Student03</td>
			<td>Languages</td>
			<td>female</td>
			<td>85</td>
			<td>95</td>
			<td>80</td>
			<td>medium</td>
		</tr>
		<tr>
			<td>Student01</td>
			<td>Languages</td>
			<td>male</td>
			<td>80</td>
			<td>70</td>
			<td>75</td>
			<td>bad</td>
		</tr>
		<tr>
			<td>Student02</td>
			<td>Mathematics</td>
			<td>male</td>
			<td>90</td>
			<td>88</td>
			<td>100</td>
			<td>good</td>

		</tr>
		<tr>
			<td>Student03</td>
			<td>Languages</td>
			<td>female</td>
			<td>85</td>
			<td>95</td>
			<td>80</td>
			<td>medium</td>
		</tr>
		<tr>
			<td>Student01</td>
			<td>Languages</td>
			<td>male</td>
			<td>80</td>
			<td>70</td>
			<td>75</td>
			<td>bad</td>
		</tr>
		<tr>
			<td>Student02</td>
			<td>Mathematics</td>
			<td>male</td>
			<td>90</td>
			<td>88</td>
			<td>100</td>
			<td>good</td>

		</tr>
		<tr>
			<td>Student03</td>
			<td>Languages</td>
			<td>female</td>
			<td>85</td>
			<td>95</td>
			<td>80</td>
			<td>medium</td>
		</tr>
		<tr>
			<td>Student01</td>
			<td>Languages</td>
			<td>male</td>
			<td>80</td>
			<td>70</td>
			<td>75</td>
			<td>bad</td>
		</tr>
		<tr>
			<td>Student02</td>
			<td>Mathematics</td>
			<td>male</td>
			<td>90</td>
			<td>88</td>
			<td>100</td>
			<td>good</td>

		</tr>
		<tr>
			<td>Student03</td>
			<td>Languages</td>
			<td>female</td>
			<td>85</td>
			<td>95</td>
			<td>80</td>
			<td>medium</td>
		</tr>
	</tbody>
</table>
</div>
<div class="js"></div>
<div class="html"></div>
</div>
</div>

<div id="companion-pager-example" class="section">
<h2>Companion plugin, pager.</h2>

<p>Text here.</p>

<script type="text/javascript">
$(document).ready(function() {

	
	
	$("#companion-pager").tablesorter().tablesorterPager({
		size: 5
	});
}); 		
</script>


<div class="tab">
<ul>
	<li>Demo</li>
	<li>Javascript</li>
	<li>HTML</li>
</ul>
<div class="demo">
<table id="companion-pager" cellspacing="0">
	<thead>
		<tr>
			<th>Name</th>
			<th>Major</th>
			<th>Gender</th>
			<th>English</th>
			<th>Japanese</th>
			<th>Calculus</th>
			<th>Overall grades</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Student01</td>
			<td>Languages</td>
			<td>male</td>
			<td>80</td>
			<td>70</td>
			<td>75</td>
			<td>bad</td>
		</tr>
		<tr>
			<td>Student02</td>
			<td>Mathematics</td>
			<td>male</td>
			<td>90</td>
			<td>88</td>
			<td>100</td>
			<td>good</td>

		</tr>
		<tr>
			<td>Student03</td>
			<td>Languages</td>
			<td>female</td>
			<td>85</td>
			<td>95</td>
			<td>80</td>
			<td>medium</td>
		</tr>
		<tr>
			<td>Student04</td>
			<td>Languages</td>
			<td>male</td>
			<td>80</td>
			<td>70</td>
			<td>75</td>
			<td>bad</td>
		</tr>
		<tr>
			<td>Student05</td>
			<td>Mathematics</td>
			<td>male</td>
			<td>90</td>
			<td>88</td>
			<td>100</td>
			<td>good</td>

		</tr>
		<tr>
			<td>Student06</td>
			<td>Languages</td>
			<td>female</td>
			<td>85</td>
			<td>95</td>
			<td>80</td>
			<td>medium</td>
		</tr>
		<tr>
			<td>Student07</td>
			<td>Languages</td>
			<td>male</td>
			<td>80</td>
			<td>70</td>
			<td>75</td>
			<td>bad</td>
		</tr>
		<tr>
			<td>Student08</td>
			<td>Mathematics</td>
			<td>male</td>
			<td>90</td>
			<td>88</td>
			<td>100</td>
			<td>good</td>

		</tr>
		<tr>
			<td>Student09</td>
			<td>Languages</td>
			<td>female</td>
			<td>85</td>
			<td>95</td>
			<td>80</td>
			<td>medium</td>
		</tr>
		<tr>
			<td>Student10</td>
			<td>Languages</td>
			<td>male</td>
			<td>80</td>
			<td>70</td>
			<td>75</td>
			<td>bad</td>
		</tr>
		<tr>
			<td>Student11</td>
			<td>Mathematics</td>
			<td>male</td>
			<td>90</td>
			<td>88</td>
			<td>100</td>
			<td>good</td>

		</tr>
		<tr>
			<td>Student12</td>
			<td>Languages</td>
			<td>female</td>
			<td>85</td>
			<td>95</td>
			<td>80</td>
			<td>medium</td>
		</tr>
	</tbody>
</table>
</div>
<div class="js"></div>
<div class="html"></div>
</div>
</div>


<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-2189649-1";
urchinTracker();
</script>
</body>

</html>
